<template>
    <view class="vcode-input-body">
        <text
            class="vcode-input-item"
            :class="isBorderLine ? 'vcode-input-line' : 'vcode-input-border'"
            v-for="(v, index) in sum"
            :key="index"
            @tap.stop="setFocus"
        >
            {{ text[index] ? text[index] : '' }}
        </text>
        <view class="hidden-input">
            <input
                id="vcodeInput"
                ref="vcodeInput"
                type="string"
                :show-confirm-bar="false"
                auto-blur
                :focus="focus"
                :maxlength="sum"
                v-model="value"
                @blur="setBlur"
            />
        </view>
    </view>
</template>

<script>
export default {
    name: 'VcodeInput',
    props: {
        sum: {
            type: Number,
            default: 8
        },
        isBorderLine: {
            type: Boolean,
            default: false
        },
        borderColor: {
            type: String,
            default: '#DADADA'
        },
        borderValueColor: {
            type: String,
            default: '#424456'
        },
        isAutoComplete: {
            type: Boolean,
            default: true
        },
        isPassword: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            focus: false,
            text: [],
            value: ''
        };
    },
    watch: {
        value(value, oldVal) {
            if (this.isAutoComplete) {
                if (value.length >= this.sum) {
                    this.focus = false;
                    this.$emit('vcodeInput', value);
                }
            } else {
                this.$emit('vcodeInput', value);
            }
            if (this.isPassword) {
                let val = '';
                for (let i = 0; i < value.length; i++) {
                    val += '●';
                }
                this.text = val;
            } else {
                this.text = value.split('');
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initInput();
        });
    },
    methods: {
        initInput() {
            this.focus = true;
            // // #ifdef H5
            // this.$refs.vcodeInput.$refs.input.setAttribute('type', 'number');
            // this.$refs.vcodeInput.$refs.input.setAttribute('pattern', '[0-9]*');
            // // #endif
        },
        setBlur() {
            this.$nextTick(() => {
                this.focus = false;
            });
        },
        setFocus() {
            console.log(12345);
            this.focus = !this.focus;
        },
        clearValue() {
            this.value = '';
        }
    }
};
</script>

<style lang="scss" scoped>
.vcode-input-body {
    overflow: hidden;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;
    color: #333333;
}
.vcode-input-item {
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68rpx;
    height: 88rpx;
    border-radius: 8rpx;
    background-color: #cccccc;
    border: 1px solid #999999;
    margin-bottom: 60rpx;
    font-size: 40rpx;
}
.hidden-input {
    width: 1px;
    height: 1px;
    position: absolute;
    left: -1px;
    top: -1px;
    overflow: hidden;
}
</style>
